<template>
	<view class="feedback-detail-container">
		<u-loading-icon v-if="loading"></u-loading-icon>
		<view v-else :class="['data-list', isAdmin ? 'admin-mode' : 'user-mode']">
			<u-cell-group class="data-row" :border="false">
				<u-cell title="反馈内容:" size="large"></u-cell>
				<u-cell :border="false">
					<view slot="value" class="u-slot-text">
						<u--textarea v-model="detailForm.feedbackContent" placeholder="请输入内容" disabled count></u--textarea>
					</view>
				</u-cell>
			</u-cell-group>
			<u-cell-group class="data-row" :border="false" v-if="detailForm.relatedImages.length >0">
				<u-cell title="相关图片:" size="large"></u-cell>
				<u-cell :border="false">
					<view slot="value" class="u-slot-img">
						<view v-for="(item, index) in detailForm.relatedImages" :key="index">
							<image class="image-item" :src="baseUrl + item" mode="heightFix" @click="imgPreview(item)"></image>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
			<u-cell-group class="data-row">
				<u-cell title="提交人:">
					<text slot="value" class="u-slot-value overflow">{{ detailForm.createByName }}</text>
				</u-cell>
				<u-cell title="提交时间:">
					<text slot="value" class="u-slot-value overflow">{{ detailForm.createTime }}</text>
				</u-cell>
				<u-cell :border="false">
					<view slot="title" class="u-slot-result">
						<text >处理结果:</text>
						<view class="u-slot-text pt-10">
							<u--textarea v-model="detailForm.processingResult" :placeholder="!isAdmin ? '暂无处理结果' : '请输入内容'" :disabled="!isAdmin"></u--textarea>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="" v-if="isAdmin">
			<u-button class="createSession" type="primary" text="提交处理结果" @click="handleUpdate()"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailForm: {
				relatedImages: []
			},
			isAdmin: false,
			id: '',
			baseUrl: '',
			loading: true
		};
	},
	onLoad: function (option) {
		this.baseUrl = uni.$config.baseUrl
		this.id = JSON.parse(decodeURIComponent(option.id));
	},
	onShow() {
		this.getFeedbackList()
		this.getUserRole()
	},
	methods: {
		getUserRole() {
			this.$request({
				url: "/user/adminRole",
				method: "get",
				params: {
					userId: uni.getStorageSync("user").id
				},
			}).then(({data}) => {
				console.log(data)
				this.isAdmin = data
			})
		},
		getFeedbackList() {
			this.loading = true
			this.$request({
				url: "/feedback/" + `${this.id}`,
				method: "get",
			}).then(({
				data
			}) => {
				this.detailForm = data
				this.loading = false
			});
		},
		handleUpdate() {
			this.$request({
				url: "/feedback/update",
				method: "post",
				data: this.detailForm
			}).then((
				data
			) => {
				this.$toast(data.msg);
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			});
		},
		imgPreview(item) {
		  uni.previewImage({
			current: 0, // 当前显示图片的索引
			urls: [this.baseUrl + item], // 需要预览的图片列表
		  });
		},
	},
}
</script>

<style lang="scss" scoped>
	.feedback-detail-container {
		padding: 40rpx 30rpx 166rpx;
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;
		.overflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.admin-mode {
			height: calc(100vh - 300rpx - env(safe-area-inset-bottom) - env(safe-area-inset-top));
		}
		.data-list {
			// margin-bottom: 120rpx; // 为按钮留出空间
			// height: calc(100vh - 300rpx - env(safe-area-inset-bottom)); // 动态计算高度
			overflow-y: auto;
			.data-row {
				font-size: 30rpx;
				display: flex;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 40rpx;
				::v-deep .u-cell__title-text {
					color: #1C2126;
				}
				.u-slot-value {
					color: #4C5A67;
					width: 70%;
					text-align: end;
				}
				.u-slot-text {
					width: 100%;
					.u-textarea {
						border: none;
						background: #F5F7FB;
						height: 234rpx;
						border-radius: 8px;
						::v-deep .u-textarea__field {
							color: #1C2126;
							font-size: 30rpx;
							height: 100% !important;
						}
					}
				}
				.u-slot-img {
					width: 100%;
					height: 180rpx;
					display: flex;
					overflow-x: auto;
					.image-item {
						height: 180rpx;
						margin-right: 20rpx;
					}
				}
				.u-slot-result {
					width: 100%;
					text-align: left;
					color: #1C2126;
					.pt-10 {
						padding-top: 20rpx;
					}
				}
			}
		}
		.createSession {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 60rpx;
			width: calc(100% - 60rpx);
			height: 80rpx;
			background: #0084FF;
			opacity: 1;
			padding-bottom: env(safe-area-inset-bottom); // 安全区域
			z-index: 999;
		}
		::v-deep .u-textarea__count {
			position: absolute;
			right: 5px;
			top: -42px;
			font-size: 15px;
			color: #4C5A67;
		}
	}
</style>